<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>设备</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
	<div style="padding: 16px;">
		<div class="layui-card">
			<div class="layui-card-body">
				<form id="searchbar" class="layui-form" onsubmit="javascript:return false;">
					<div class="layui-form-item">
						<div class="layui-inline">
							<input class="layui-input" type="text" name="keyWord" placeholder="请输入搜索内容">
						</div>
						<div class="layui-inline">
							<button class="layui-btn layui-btn-primary" data-toggle="tableSearch"><i
									class="layui-icon layui-icon-search"></i></button>
						</div>
					</div>
				</form>
				<table id="tableDevice" lay-filter="tableDevice"></table>
				<script type="text/html" id="toolbar">
		  		<div class="layui-btn-container">
		    		<button class="layui-btn layui-btn-sm layui-hide" data-perm="device/add"  onclick="add()"><i class="layui-icon layui-icon-addition"></i>添加</button>
		  		</div>
				</script>
				<script type="text/html" id="handbar">
		  		<a class="layui-hide" href="javascript:void(0)" data-perm="device/edit" lay-event="custom" data-handle="edit" title="编辑"><i class="layui-icon layui-icon-edit icon-edit"></i></a>
		  		<a class="layui-hide" href="javascript:void(0)" data-perm="device/delete" lay-event="custom" data-handle="deleteHandle" title="删除"><i class="layui-icon layui-icon-delete icon-dele"></i></a>
			</script>
			</div>
		</div>
	</div>

	<script id="dialog" type="text/html">
		<div id="dialogContent" style="padding: 20px;">
		<form  class="layui-form" id="dialogForm" lay-filter="dialogForm" onsubmit="return beforeSubmit();" >
		 <div class="layui-form-item">
		    <label class="layui-form-label required">MAC</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="mac" lay-verify="required|length"   lay-verType="tips"  data-minlen = "5"  data-maxlen="20"  autocomplete="off">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label required">名称</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="name" lay-verify="required"   lay-verType="tips"  autocomplete="off">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label required">经度</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="longitude" lay-verify="required"   lay-verType="tips"   autocomplete="off">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label required">维度</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="latitude" lay-verify="required"   lay-verType="tips"  autocomplete="off">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">地址</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="address" autocomplete="off">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label">描述</label>
		    <div class="layui-input-block">
		      <textarea  class="layui-textarea"  name="description" autocomplete="off" ></textarea>
		    </div>
		  </div>
  		  
  		  <div class="layui-form-item">
		    <div class="layui-input-block" align="right"  style="height: auto">
		      <button type="submit" class="layui-btn ">保存</button>
		    </div>
		  </div>
		</form>
		</div>
	</script>
</body>

<script>
	var content = layui.content;
	var request = layui.request;
	var form = layui.form;
	var button = layui.button;
	var layer = layui.layer;

	var tableInst = null;
	var dialogHtml = $("#dialog").html();
	var dialogData = {
		handle: '',
		dialogIndex: '',
	};
	$(function () {
		var options = {
			elem: "#tableDevice",
			layfilter: "tableDevice",
			toolbar: '#toolbar',
			url: "device/search",
			cols: [[
				{field: 'mac', title: 'MAC'}, //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
				{field: 'name', title: '名称'},
				{field: 'address', title: '地址'},
				{field: 'description', title: '描述'},
				{field: 'open', title: '开关', templet: openFormatter},
				{field: 'createtime', title: '创建时间', align: 'center'},
				{fixed: 'right', title: '操作', templet: '#handbar', width: 150}
			]]
		};
		tableInst = content.initTable(options);

		form.on('switch(devcie-switch)', function (data) {
			var obj = {mac: data.value};
			if (data.elem.checked) {
				obj.open = "1";
			} else {
				obj.open = "0";
			}
			request.post('device/switchDevice', obj);
		});

		function openFormatter(row) {
			var html = "";
			var checked = "";
			if (row.open == '1') {
				checked = "checked";
			}
			html = '<input type="checkbox" value="' + row.mac + '" name="switch" lay-skin="switch" lay-text="ON|OFF" lay-filter="devcie-switch" ' + checked + '>';
			return html;
		}
	})

	function add() {
		dialogData.handle = "device/add";
		dialogData.dialogIndex = content.dialog('添加设备', '600px', dialogHtml);
	}

	function edit(row) {
		dialogData.handle = "device/edit";
		dialogData.dialogIndex = content.dialog('修改设备', '600px', dialogHtml);
		$("#dialogForm input[name='mac']").addClass("layui-disabled").attr("disabled", "true")
		form.val("dialogForm", row)
	}

	function deleteHandle(row) {
		content.confirm("确认删除设备" + row.name, function () {
			request.postAlert("device/delete", {id: row.mac}).then(res => {
				tableInst.reloadData();
			})
		})
	}

	function beforeSubmit() {
		var btn = button.load({elem: "#dialogForm button[type='submit']"});
		if (!form.validate(".layui-form")) {
			btn.stop();
			return false;
		}
		var data = form.val("dialogForm");
		request.postAlert(dialogData.handle, data).then(res => {
			layer.close(dialogData.dialogIndex);
			tableInst.reloadData();
		}).catch(err => {
			btn.stop();
		})
		return false;
	}
</script>
<style scoped>
	.icon-edit {
		font-size: 20px;
		color: #2f60c2;
		margin-right: 10px;
	}

	.icon-dele {
		font-size: 20px;
		color: #ff5722;
		margin-right: 10px;
	}

	.icon-view {
		font-size: 20px;
		color: #16b777;
		margin-right: 10px;
	}
</style>

</html>